<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- <textarea name="" id="content" cols="30" rows="10"></textarea> -->
    <!-- <input type="text" id="content"> -->
    <!-- <div id="content" contenteditable="true">12312123123</div> -->
    <div id="content">12312123123</div>
</body>
<script>
    //1、 键盘事件一般用于  输入框和document
    // textarea,input,document
    //2、 <div id="content" contenteditable="true">12312123123</div>


    // var content = document.querySelector("#content");
    // content.onkeydown = function () {
    //     console.log("按键被按下");
    // }

    // 键盘按下
    document.onkeydown = function (e) {
        // console.log("按键被按下");
        var e = e || window.event;
        console.log(e);
        // console.log(e.keyCode, e.which);
        var keyCode = e.keyCode || e.which; // 当前按键对应的 keyCode
        console.log(keyCode);
    }

    //  ← ：37    ↑：38   →：39   ↓：40    enter:13

    // 键盘松开
    // document.onkeyup = function () {
    //     console.log("按键松开");
    // }

    // 键盘松开
    // document.onkeypress = function () {
    //     console.log("键盘按键被按下并松开");
    // }
</script>

</html>